/**
 * color scheme: https://color.adobe.com/create/color-wheel/?base=2&rule=Complementary&selected=4&name=My%20Color%20Theme&mode=rgb&rgbvalues=0.17030891601918655,0.4058823529411765,0.023676470588235302,0.5171907756812364,1,0.21666666666666667,0.3215686274509804,0.7058823529411765,0.08235294117647059,0.39483604076295736,0,0.4058823529411765,0.6889126559717383,0.08235294117647061,0.7058823529411765&swatchOrder=0,1,2,3,4
 */
*
body,
html {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 12px;
  color: #444;
  height: 100%;
  padding: 0;
  margin: 0;
}
#canvas {
	height: 100%;
	padding: 0;
	margin: 0;
}
/**
 * bpmn + custom icon definitions
 */
@font-face {
  font-family: 'app';
  src: url(static/media/app.af3dacd9.eot);
  src: url(static/media/app.af3dacd9.eot#iefix) format('embedded-opentype'), url(static/media/app.9b58e638.woff) format('woff'), url(static/media/app.9906fa74.ttf) format('truetype'), url(static/media/app.01f8f68a.svg#bpmnio) format('svg');
  font-weight: normal;
  font-style: normal;
}
[class^="icon-"]:before,
[class*=" icon-"]:before {
  font-style: normal;
  font-weight: normal;
  speak: none;
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  text-align: center;
  font-variant: normal;
  text-transform: none;
  line-height: 1em;
}
[class^="icon-"]:before,
[class*=" icon-"]:before {
  font-family: "app";
}
.icon-bpmn-io-logo:before {
  content: '\e800';
}
/* '' */
.icon-loading:before {
  content: '\f415';
}
/* '' */
.icon-picture:before {
  content: '\f416';
}
/* '' */
.icon-plus:before {
  content: '\f417';
}
/* '' */
.icon-plus-circled:before {
  content: '\f418';
}
/* '' */
.icon-minus:before {
  content: '\f419';
}
/* '' */
.icon-info:before {
  content: '\f41a';
}
/* '' */
.icon-download:before {
  content: '\f41b';
}
/* '' */
.icon-undo:before {
  content: '\f41c';
}
/* '' */
.icon-redo:before {
  content: '\f41d';
}
/* '' */
.icon-open:before {
  content: '\f41e';
}
/* '' */
.icon-size-reset:before {
  content: '\f41f';
}
/* '' */
.icon-comment:before {
  content: '\f420';
}
/* '' */
.icon-keyboard:before {
  content: '\f423';
}
/* '' */
.icon-resize-full:before {
  content: '\f425';
}
/* '' */
.icon-resize-small:before {
  content: '\f426';
}
/* '' */
@keyframes spin {
  0% {
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -moz-transform: rotate(359deg);
    -o-transform: rotate(359deg);
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}
.animate-pulsate {
  animation: pulsate 1s infinite linear;
  animation-timing-function: ease-in-out;
  display: inline-block;
}
@keyframes pulsate {
  0% {
    transform: scale(0.9);
    opacity: 0.8;
  }
  50% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(0.9);
    opacity: 0.8;
  }
}
/**
 * project logo
 */
.project-logo,
.project-logo a {
  color: #52B415 !important;
}
.content,
.content > div {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.content > .screen {
  text-align: center;
  display: table;
  font-size: 16px;
}
.content > .screen .note {
  vertical-align: middle;
  text-align: center;
  display: table-cell;
}
.content .error .details {
  max-width: 500px;
  font-size: 12px;
  margin: 20px auto;
  text-align: left;
  color: #BD2828;
}
.content .error .error-log {
  border: solid 1px #BD2828;
  background: #fdf6f6;
  color: #BD2828;
}
.content .error .error-log:hover {
  background: #fefafa;
}
body:not(.error) .screen.error,
body:not(.intro) .screen.intro,
body:not(.loading) .screen.loading {
  display: none;
}
body.loading,
body.intro {
  opacity: 0;
  transition: opacity 1s;
}
body.loading.animate,
body.intro.animate {
  opacity: 1;
}
.screen.loading img {
  width: 48px;
}
.screen .project-logo {
  font-size: 120px;
}
.canvas {
  display: block;
}
body.shown .canvas,
body.loaded .canvas {
  display: block;
}
body.loaded .canvas svg {
  visibility: hidden;
}
body:not(.shown) .io-export,
body:not(.shown) .io-zoom-controls {
  display: none;
}
/** front page / drop zone */
.samples,
.message {
  max-width: 700px;
  margin: auto;
}
@media (max-width: 720px) {
  .samples,
  .message {
    margin: 20px;
  }
  .samples {
    margin-bottom: 60px;
  }
}
.message {
  padding: 40px;
  font-size: 20px;
}
.samples {
  margin-top: 80px;
  margin-bottom: 60px;
  opacity: 0.4;
  transition: ease-in 0.1s;
}
.samples:hover {
  opacity: 1;
}
.samples .sample {
  display: inline-block;
  max-width: 100%;
  vertical-align: top;
  position: relative;
}
.samples .tryit {
  position: absolute;
  right: 0;
  top: 0;
  width: auto;
}
.samples .caption {
  font-size: 11px;
  color: #999;
}
.samples .img {
  border-radius: 5px;
  box-shadow: inset 0 0px 4px #999;
  padding: 5px;
  width: 100%;
}
.samples .sample > a {
  display: block;
}
/** widgets **/
.bjs-powered-by,
.cjs-powered-by,
.djs-powered-by,
.io-control {
  background: #FFF;
  border-radius: 2px;
  border: solid 1px #E0E0E0;
  padding: 5px;
}
.cjs-powered-by,
.bjs-powered-by {
  padding-bottom: 2px;
}
.close {
  font-size: 21px;
  font-weight: 700;
  text-shadow: 0 1px 0 #FFF;
  opacity: 0.2;
  line-height: 1;
  vertical-align: middle;
  margin-left: 5px;
}
.close:hover {
  opacity: 1;
}
.vr {
  height: 18px;
  display: inline-block;
  border-right: solid 1px #CCC;
}
a {
  color: #740076;
}
a:link {
  text-decoration: none;
}
a:hover {
  color: #a600a9;
}
.io-control-list {
  list-style: none;
  padding: 5px;
  margin: 0;
}
.io-control-list a,
.io-control-list a:visited,
.io-control-list button {
  padding: 0;
  outline: none;
  cursor: pointer;
  font-size: 22px;
  line-height: 26px;
  color: #555555;
  background: none;
  border: none;
}
.io-control-list a:hover,
.io-control-list a:visited:hover,
.io-control-list button:hover {
  color: #333333;
}
.io-control-list a.inactive,
.io-control-list a:visited.inactive,
.io-control-list button.inactive {
  color: #E0E0E0;
  cursor: default;
}
.io-control-list.io-horizontal,
.io-control-list.io-horizontal li {
  display: inline-block;
}
.io-control-list.io-horizontal a {
  padding: 2px;
  margin: 0 5px;
}
.io-control-list.io-horizontal button {
  margin: 0 5px;
}
.io-control hr {
  border: none;
  border-top: solid 1px #EEE;
}
.io-help,
.io-legal {
  position: fixed;
  transition: ease-in 0.1s;
}
.io-legal {
  right: 100px;
}
.io-help {
  right: 20px;
}
body.shown .io-legal {
  right: 165px;
}
body.shown .io-help {
  right: 85px;
}
.io-legal a {
  font-size: 14px;
  line-height: 30px;
}
.io-help button:hover,
.io-help a:hover,
.io-legal a:hover {
  background: #F0F0F0;
  border-radius: 2px;
}
.io-import-export {
  position: fixed;
  left: 20px;
}
.io-help,
.io-legal,
.io-import-export {
  bottom: 25px;
}
.io-import {
  margin-right: 10px;
}
.io-zoom-controls {
  width: auto;
  position: fixed;
  right: 15px;
  bottom: 90px;
}
.io-editing-tools {
  width: auto;
  position: fixed;
  right: 15px;
  top: 20px;
  display: none;
}
.io-editing-tools .io-control {
  margin-left: 10px;
}
.io-editing-tools .io-control button {
  margin: 0;
}
.io-zoom-reset {
  margin-bottom: 10px;
}
.io-import-export .inactive {
  opacity: 0.3;
}
/**
 * import warnings dialog
 */
.import-warnings .error-log {
  width: 100%;
}
/**
 * utilities
 */
.hidden {
  display: none;
}
/**
 * alerts
 */
.io-alerts {
  position: fixed;
  top: 20px;
  width: 450px;
  text-align: center;
  left: 50%;
  margin-left: -225px;
}
.io-alerts .alert {
  display: none;
  background: #FFFFDB;
  padding: 10px 20px;
  line-height: 20px;
  margin: 0 auto 10px;
}
.io-alerts .alert.open {
  display: inline-block;
}
.io-alerts .close {
  float: right;
}
.io-toggle-fullscreen {
  display: none;
}
.io-toggle-fullscreen.open {
  display: inline-block;
}
@media (max-width: 500px) {
  .io-alerts {
    width: 100%;
    text-align: center;
    left: 0;
    margin: 0;
  }
}
/**
 * dialogs
 */
.io-dialog {
  display: none;
}
.io-dialog.open {
  display: block;
}
.io-dialog.open:before {
  content: '';
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background: #666;
  opacity: 0.2;
  z-index: 1001;
}
.io-dialog .content {
  position: fixed;
  width: 600px;
  left: 50%;
  margin-left: -300px;
  top: 100px;
  background: white;
  padding: 10px 30px 20px 30px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  border-radius: 2px;
  height: auto;
  z-index: 1001;
}
.io-dialog .project-logo {
  position: absolute;
  bottom: 27px;
  right: 27px;
  width: 54px;
  height: 54px;
  font-size: 48px;
}
.keybindings-dialog .content {
  width: 450px;
  margin-left: -225px;
}
.keybindings-dialog .binding {
  padding: 5px 10px;
  font-family: monospace;
}
textarea.error-log {
  border: solid 1px #CCC;
  background: #F6F6F6;
  padding: 10px;
  margin: 10px auto;
  width: 100%;
  min-height: 150px;
  display: block;
}
textarea.error-log:hover {
  background: #f9f9f9;
}
@media (max-width: 600px) {
  .io-dialog .content {
    left: 20px;
    right: 20px;
    top: 20px;
    width: auto;
    margin: 0;
  }
}
:full-screen .icon-resize:before {
  content: '\e86e';
  /* see .icon-resize-small:before */
}
:-moz-full-screen .icon-resize:before {
  content: '\e86e';
  /* see .icon-resize-small:before */
}
:-ms-full-screen .icon-resize:before {
  content: '\e86e';
  /* see .icon-resize-small:before */
}
:-webkit-full-screen .icon-resize:before {
  content: '\e86e';
  /* see .icon-resize-small:before */
}
.icon-resize:before {
  content: '\e86d';
  /* see .icon-resize-full:before */
}
.icon-resize:before {
  content: '\e86d';
  /* see .icon-resize-full:before */
}
.icon-resize:before {
  content: '\e86d';
  /* see .icon-resize-full:before */
}
.icon-resize:before {
  content: '\e86d';
  /* see .icon-resize-full:before */
}
.drop-overlay {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  padding: 50px;
  background: rgba(255, 255, 255, 0.9);
  z-index: 1000;
}
.drop-overlay .box {
  text-align: center;
  border: dashed 4px #CCC;
  height: 100%;
  width: 100%;
  display: table;
}
.drop-overlay .label {
  font-size: 26px;
  color: #888;
  margin: auto;
  display: table-cell;
  vertical-align: middle;
}